// pages/course/course.js
var model = require('../../component/muti-select/muti-select.js')

var show = false;
var item = {};

Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: {
      show: show
    },
    selectList: [{
      id:1,
      text:'课程名称1',
      src:'../../img/test.png',
      color:'orange',
      type:'室内课',
      all:30
    }, {
        id: 2,
        text: '课程名称1',
        src:'../../img/test.png',
        color: 'blue',
        type: '室外课',
        all: 25
    }, {
        id: 3,
        text: '课程名称1',
        src:'../../img/test.png',
        color: 'orange',
        type: '室内课',
        all: 20
    },
    {
      id: 4,
      text: '课程名称1',
      src:'../../img/test.png',
      color: 'blue',
      type: '室外课',
      all: 30
    },
    {
      id: 5,
      text: '课程名称1',
      src:'../../img/test.png',
      color: 'orange',
      type: '室内课',
      all: 35
    }],
    selectList2: [{
      "id": "1",
      "text": "3-4"
    }, {
      "id": "2",
      "text": "5-7"
    }, {
      "id": "3",
      "text": "4-8"
    },
    {
      "id": "4",
      "text": "6-9"
    },
    {
      "id": "5",
      "text": "10+"
    }],
    // selectC: false, 
    // selectF: false,
    // classAddress:"课程区域",
    fitAge:"请选择",
    county:'请选择',
    menuTop: 0,
    pageNameTop: 0,
    menuFixed: false, 
    showModalStatus: false,
    fixStatus:false
  },
  // showClass:function(){
  //   this.setData({
  //     selectC: !this.data.selectC
  //   })
  // },
  // mySelectC(e) {
  //   var name = e.currentTarget.dataset.name
  //   this.setData({
  //     classAddress: name,
  //     selectC: false
  //   })
  // },
  // showAge: function () {
  //   this.setData({
  //     selectF: !this.data.selectF
  //   })
  // },
  // 选择适合年龄
  mySelectF(e) {
    var name = e.currentTarget.dataset.text
    this.setData({
      fitAge: name,
      showModalStatus: false
    })
  },
  powerDrawer: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function (currentStatu) {
    /* 动画部分 */
    // 第1步：创建动画实例 
    var animation = wx.createAnimation({
      duration: 200,  //动画时长
      timingFunction: "linear", //线性
      delay: 0  //0则不延迟
    });

    // 第2步：这个动画实例赋给当前的动画实例
    this.animation = animation;

    // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停
    animation.translateY(240).step();

    // 第4步：导出动画对象赋给数据对象储存
    this.setData({
      animationData: animation.export()
    })

    // 第5步：设置定时器到指定时候后，执行第二组动画
    setTimeout(function () {
      // 执行第二组动画：Y轴不偏移，停
      animation.translateY(0).step()
      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
      this.setData({
        animationData: animation
      })

      //关闭抽屉
      if (currentStatu == "close") {
        this.setData(
          {
            showModalStatus: false,
            fixStatus:false
          }
        );
      }
    }.bind(this), 200)

    // 显示抽屉
    if (currentStatu == "open") {
      this.setData(
        {
          showModalStatus: true,
          fixStatus:true
        }
      );
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (e) {
    var that = this;
    //请求数据
    model.updateAreaData(that, 0, e);
  },
  //点击选择城市按钮显示picker-view
  translate: function (e) {
    model.animationEvents(this, 0, true, 400);
    this.setData(
      {
        fixStatus: true
      }
    );
  },
  //隐藏picker-view
  hiddenFloatView: function (e) {
    model.animationEvents(this, 200, false, 400);
    this.setData(
      {
        fixStatus: false
      }
    );
  },
  //滑动事件
  bindChange: function (e) {
    model.updateAreaData(this, 1, e);
    item = this.data.item;
    this.setData({
      province: item.provinces[item.value[0]].name,
      city: item.citys[item.value[1]].name,
      county: item.countys[item.value[2]].name
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    var query = wx.createSelectorQuery()//创建节点查询器 query
    query.select('#affix').boundingClientRect()
   //这段代码的意思是选择Id= the - id的节点，获取节点位置信息的查询请求
    query.exec(function (res) {
      // console.log(res); // #affix节点的上边界坐
      that.setData({
        menuTop: res[0].top,
      })
    });
  },

  onPageScroll: function (e) {
    // console.log(e.scrollTop);
    var that = this;
    // 3.当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位
    
      if (e.scrollTop > that.data.menuTop) {
        if (this.data.menuFixed) {
          return
        }
        that.setData({
          menuFixed: true
        })
      } else {
        that.setData({
          menuFixed: false
        })
      }
   

  },

// 轮播图跳转
  jump:function(){
    wx.navigateTo({
      url: '../courseDetail/courseDetail',
    })
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})